<%@page import="management.system.model.bean.DiscusionDTO"%>
<%@page import="management.system.model.bean.IdeaDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>	

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="css/theme.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/stars.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
	var StyleFile = "theme" + document.cookie.charAt(6) + ".css";
	document
			.writeln('<link rel="stylesheet" type="text/css" href="css/' + StyleFile + '">');

	
	function enviar(){
		
		
		var comentario =document.getElementById("txtComentario").value;
		if( comentario == null || comentario.length == 0 || /^\s+$/.test(comentario) ) {
			alert("Ingrese un comentario válido.");
			document.getElementById('txtComentario').focus();
			return;
		}
		
		document.forms[0].method="post";
		document.forms[0].action="<%=request.getContextPath()%>/discusion?metodo=INSERTA";
		document.forms[0].submit();
	}
	
	$.fn.stars = function() {
	    return $(this).each(function() {
	        // Get the value
	        var val = parseFloat($(this).html());
	        // Make sure that the value is in 0 - 5 range, multiply to get width
	        var size = Math.max(0, (Math.min(5, val))) * 16;
	        // Create stars holder
	        var $span = $('<span />').width(size);
	        // Replace the numerical value with stars
	        $(this).html($span);
	    });
	};
	
	$(function() {
	    $('span.stars').stars();
	});
	
</script>

<style type="text/css">

		span.stars, span.stars span {
			display: block;
			background: url(images/star.png) 0 -16px repeat-x;
			width: 80px;
			height: 16px;
		}
	
		span.stars span {
			background-position: 0 0;
		}
</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<jsp:include page="pageHeader.jsp" />
			<div id="topmenu">
				<jsp:include page="menu.jsp" />
			</div>
		</div>
		<div id="top-panel">
			<div id="panel">
				<ul>
					<li><a href="<%=request.getContextPath()%>/ServletLogOut"
						class="report">Salir</a></li>
				</ul>
			</div>
		</div>
		<div id="wrapper">
			<div id="content">
				<form
					action="<%=request.getContextPath()%>/discusion?metodo=INSERTA"
					method="post">
					<%
						IdeaDTO idea = (IdeaDTO) request.getAttribute("dto");
					%>
					<input type="hidden" name="codigo" value="<%= idea.getIdeaId()%>">
					<div align="center">
					<h2><%=idea.getTitulo()%></h2>
					<img alt="<%=idea.getTitulo()%>" src="images/<%=idea.getImagen()%>">
					</div>
					<div>
						<div class="message">
							
							<display:table name="discusiones" id="bean">
							<display:column>
							<div id="rightnow">
								<h3 class="reallynow">
									<span>${bean.nombres}</span> 
									
									<a href="#" class="app_add">${bean.fechaRegistro}</a> <br />
								</h3>
								<p class="youhave">
									${bean.discusion}
								</p>
						</div>
							<span class="stars">${bean.puntuacion}</span>						
							</display:column>
							
							</display:table>
							
						</div>
					</div>

					<fieldset id="personal">
						<legend>COMENTARIOS</legend>
						<div class="stars">
							<input type="radio" name="star" class="star-1" id="star-1"
								value="1" /> <label class="star-1" for="star-1">1</label> <input
								type="radio" name="star" class="star-2" id="star-2" value="2" />
							<label class="star-2" for="star-2">2</label> <input type="radio"
								name="star" class="star-3" id="star-3" value="3" /> <label
								class="star-3" for="star-3">3</label> <input type="radio"
								name="star" class="star-4" id="star-4" value="4" /> <label
								class="star-4" for="star-4">4</label> <input type="radio"
								name="star" class="star-5" id="star-5" value="5" /> <label
								class="star-5" for="star-5">5</label> <span></span>
						</div>

						<br />
						<textarea rows="10" cols="20" name="txtComentario"
							id="txtComentario" style="width: 700px;"></textarea>
						<br />
					</fieldset>

					<div align="left">
						<input id="button1" type="button" value="Send" onclick="enviar();"
							style="width: 200px;" /> <input id="button2" type="reset"
							value="Limpiar" width="100" style="width: 200px;" />
					</div>
					<br />
				</form>


			</div>
			<div id="sidebar">
				<ul>
					<li><h3>
							<a href="#" class="house">Dashboard</a>
						</h3>
						<ul>
							<li><a href="<%=request.getContextPath()%>/ServletLogOut"
								class="report">Salir</a></li>
						</ul></li>

				</ul>
			</div>
		</div>
		<div id="footer">
			<jsp:include page="footer.jsp" />
		</div>
	</div>
</body>
</html>